<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Chatty</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<link rel="stylesheet" href="css/chatty-desktop.css">
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script	src="js/imported/log4javascript.js"></script>
	<script	src="js/chatty-util.js"></script>
	<script	src="js/chatty-test.js"></script>
	<script	src="js/chatty-dal.js"></script>
	<script	src="js/chatty-bl.js"></script>
	<script	src="js/chatty-desktop.js"></script>
	<script	src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>



<body>
	<section id="Loading" data-role="dialog">
		<header data-role="header">
			<label class="header-label">Loading..</label>
			<img   class="header-image" src="image/Loading.gif" alt="Loading"/>
		</header>
	</section>
	<section id="Login" data-role="dialog">
		<header data-role="header">
			<label class="header-label">Please Login to Chatty</label>
			<img   class="header-image" src="image/Login.png" alt="Login"/>
		</header>
		<form id="LoginForm" class="content" data-role="content" action="#Dashboard" method="post">
			<div>
				<span class="colorRed">*</span>
				<label class="loginUserMailLable">Email:</label>
				<input class="loginUserMailInput" type="email" required  value="bart@mail.com"/>    
			</div>
			<div>
				<span class="colorRed">*</span>
				<label class="loginUserPassLable">Password:</label>
				<input class="loginUserPassInput" type="password" required value="123"/>    
			</div>
                
			<div>
				<span class="colorRed"><br><br>*Required</span>
			</div>
              
			<div class="loginOrRegistrerDiv">
				<a href="#Register" class="btnRegisterToChatty" data-inline="true" data-role="button">Register</a>
				<a href="" class="btnLoginToChatty" data-inline="true" data-role="button">Login</a>
		<!--	<button type="submit" class="btnLoginToChatty" data-inline="true">Login</button> -->
			</div>
        </form>		
	</section>
	
	<section id="Register" data-role="dialog" data-add-back-btn="true">
		<header data-role="header">
			<label class="header-label">Please Register to Chatty</label>
			<img   class="header-image" src="image/Register.png" alt="Register"/>
		</header>
		<form id="RegisterForm" class="content" data-role="content" action="#Dashboard">
			<div>
				<span class="colorRed">*</span>
				<label class="registerUserMailLable">Email:</label>
				<input class="registerUserMailInput" type="email" required />    
			</div>
			<div>
				<span class="colorRed">*</span>
				<label class="registerUserNameLable">Name:</label>
				<input class="registerUserNameInput" type="text" required />    
			</div>
			<div>
				<span class="colorRed">*</span>
				<label class="registerUserPassLable">Password:</label>
				<input class="registerUserPassInput" type="password" required/>    
			</div>
			<div>
				<label class="registerUserPicLable">Profile Image:</label>
				<input class="registerUserPicInput" id="file" type="file"/>
			</div>

			<div>
				<span class="colorRed"><br><br>*Required</span>
			</div>
				
			<div class="RegistrerDiv">
				<a href="#Dashboard" class="btnRegisterSubmit" data-inline="true" data-role="button">Register</a>
			<!--	<button type="submit" class="btnRegisterSubmit" data-inline="true">Register</button> -->
			</div>
		</form>				
	</section>
	
    <section id="Dashboard" data-role="page">
        <header></header>


        <div class="dashboardContent" data-role="content">

                <div class="divBuddiesAndGroups">
                            
                    <ul class="buddiesAndGroupsList" data-role="listview">

                        <!-- Example 

                        <li data-role="list-divider"><label class="divider-label">Buddies</label></li>
                   
                        <li class="buddy"> 
                            <a href="#ChatRoomUpdate" id="bart@mail.com">
                                <label class="row-label">Bart</label>
                                <img   class="row-image" src="image/Bart.jpg" alt="SearchBuddy"/>
                            </a>
                        </li>
                        
                        <li data-role="list-divider"><label class="divider-label">Groups</label></li>
                    
                        <li class="group"> 
                            <a href="#ChatRoomUpdate" id="1">
                                <label class="row-label">Simsons</label>
                                <img   class="row-image" src="image/Simsons.jpg" alt="Simsons"/>
                            </a>
                        </li>

                        -->
                        
                    </ul>	
                    
                </div>		

                <div class="divChatRoom">
                    <div class="chatRoom">
                        <ul class="messages" data-role="listview">
                        <!-- Example 
                            <li class="message">
                                <label class="messages-text">message</label>
                                <label class="messages-time">01/02/2013 12:02</label>    
                            </li>
                        -->
                        </ul>
                    </div>		
                    
                    <div class="messageErea">
                        <textarea autofocus="autofocus" class="textArea" placeholder="Enter your message here"></textarea>
                        <a href="#" class="sendMessage" data-role="button" data-icon="arrow-r" data-iconpos="notext">Send</a>
                    </div>
                </div>
               
			
		</div>		
		
   	
    		
		<footer data-role="footer" class="ui-bar" id="dashboardFooter">
            <div class="dashboardFooterDiv">
                <a href="#Login"       class="logoutBtn"      data-role="button" data-icon="delete">Logout</a>
                <a href="#EditProfile" class="editProfileBtn" data-role="button" data-icon="gear">Edit Profile</a>
                
                <a href="#SearchGroup" class="searchGroupBtn" data-role="button" data-icon="search">Search Group</a>
                <a href="#CreateGroup" class="createGroupBtn" data-role="button" data-icon="plus">Create Group</a>
                <a href="#LeaveGroup"  class="leaveGroupBtn"  data-role="button" data-icon="minus">Leave Group</a>
                
                <a href="#SearchBuddy" class="searchBuddyBtn" data-role="button" data-icon="search" >Search Buddy</a>
                
            </div>
        </footer>
	</section>	
    
    <section id="EditProfile" data-role="dialog" data-add-back-btn="true">
		<header data-role="header">
			<label class="header-label">Edit Your Profile</label>
			<img   class="header-image" src="image/Register.png" alt="Register" />
		</header>
		<form id="EditProfileForm" class="content" data-role="content">
			<div>
				<label class="editProfileUserMailLable">Email:</label>
				<input class="editProfileUserMailInput" type="email" required disabled/>    
			</div>
			<div>
				<span class="colorRed">*</span>
				<label class="editProfileUserNameLable">Name:</label>
				<input class="editProfileUserNameInput" type="text" required />    
			</div>
			<div>
				<span class="colorRed">*</span>
				<label class="editProfileUserPassLable">Password:</label>
				<input class="editProfileUserPassInput" type="password" required/>    
			</div>
			<div>
				<label class="editProfileUserPicLable">Profile Image:</label>
				<input class="editProfileUserPicInput" id="file" type="file"/>
			</div>

			<div>
				<span class="colorRed"><br>*Required</span>
			</div>
				
			<div class="registrerDiv">
   				<a href="" class="btnEditProfileSubmit" data-inline="true" data-role="button">Submit Changes</a>
			<!--	<button type="submit" class="btnEditProfileSubmit" data-inline="true">Submit Changes</button> -->
			</div>
		</form>				
	</section>
    
    <section id="SearchBuddy" data-role="dialog" data-add-back-btn="true">
		<header data-role="header">
			<label class="header-label">Search Buddy</label>
			<img   class="header-image" src="image/SearchBuddy.png" alt="SearchBuddy"/>
		</header>
        <div class="searchBuddyContent" data-role="content">
   			<div class="searchBuddyErea">
                <textarea autofocus="autofocus" id="searchBuddyText" class="textArea" placeholder="Search by buddy name or mail address"></textarea>
                <a href="#" class="searchBuddiesBtn" data-role="button" data-icon="search" data-iconpos="notext"></a>
			</div>         
            <div class="searchResultBuddiesDiv">
                <ul class="searchResultBuddies" data-role="listview">
                    <!-- Example 
                    <li class="searchResultBuddy"> 
                        <a href="#Dashboard" class="searchResultBuddy_href" id="Lisa@Lisa.com">
                            <label class="searchResultBuddyLabel">Lisa, Lisa@Lisa.com</label>
                            <img   class="searchResultBuddyImg" src="image/Lisa.jpg" alt="lisa"/>
                        </a>
                    </li>
                    --> 
                </ul>
            </div>
        </div>
	</section>

    <section id="SearchGroup" data-role="dialog" data-add-back-btn="true">
		<header data-role="header">
			<label class="header-label">Search Group</label>
			<img   class="header-image" src="image/SearchGroup.png" alt="Search Group"/>
		</header>
        <div class="searchGroupContent" data-role="content">
   			<div class="searchGroupErea">
                <textarea autofocus="autofocus" id="searchGroupsText" class="textArea" placeholder="Search group by name"></textarea>
                <a href="#" class="searchGroupsBtn" data-role="button" data-icon="search" data-iconpos="notext"></a>
			</div>         
            <div class="searchResultGroupsDiv">
                <ul class="searchResultGroups" data-role="listview">
                    <!-- Example
                    <li class="searchResultGroup"> 
                        <a href="#Groups" class="searchResultGroup_href" id=0>
                            <label class="searchResultGroupLabel">Simsons</label>
                            <img   class="searchResultGroupImg" src="image/Simsons.jpg" alt="Simsons"/>
                        </a>
                    </li>
                    -->                       
                </ul>
            </div>
        </div>
	</section>	

    <section id="LeaveGroup" data-role="dialog" data-add-back-btn="true">
		<header data-role="header">
			<label class="header-label">Leave Group</label>
			<img   class="header-image" src="image/LeaveGroup.png" alt="Leave Group"/>
		</header>
        <div class="leaveGroupContent" data-role="content">
	        <ul class="groupList" data-role="listview">
	            <!-- Example 
				<li class="group"> 
					<a href="#Groups" class="hrefLeaveGroup" id=1>
						<label class="row-label">Simsons</label>
						<img   class="row-image" src="image/Simsons.jpg" alt="Simsons"/>
					</a>
				</li>
                -->
	        </ul>
        </div>
	</section>	
    
    <section id="CreateGroup" data-role="dialog" data-add-back-btn="true">
		<header data-role="header">
			<label class="header-label">Create New Group</label>
			<img   class="header-image" src="image/SearchGroup.png" alt="SearchGroup"/>
		</header>
        <form id="CreateGroupForm" class="content" data-role="content" action="#Groups">
			<div>
				<span class="colorRed">*</span>
				<label class="createGroupNameLable">Group Name</label>
				<input class="createGroupNameInput" type="text" required/>    
			</div>
			<div>
				<span class="colorRed">*</span>
				<label class="createGroupPicLable">Group Image:</label>
				<input class="createGroupPicInput" id="file" type="file"/>
			</div>
			<div>
				<label class="createGroupDescLable">Group Description:</label>
				<input class="createGroupDescInput" type="text"/>
			</div>

			<div>
				<span class="colorRed"><br><br>*Required</span>
			</div>
				
			<div class="createGroupDiv">
   				<a href="#Dashboard" class="btnCreateGroup" data-inline="true" data-role="button">Create Group</a>
			<!--	<button type="submit" class="btnCreateGroup" data-inline="true">Create Group</button> -->
			</div>
		</form>		
	</section>	
    
</body>
</html>